Vue.component("todo-item", {
    props: ["todo"],
    template: "<li>{{ todo.text }}</li>"
});


var obj = { foo: 'bar' }
Object.freeze(obj);


var app = new Vue({
    el: "#app",
    data: function(){
        return {
            message: "学习 Vue.JS",
            
            pLink: "https://cn.vuejs.org/v2/guide/computed.html",
            pText: "计算属性缓存 vs 方法",
            pLink: "https://cn.vuejs.org/v2/guide",

            loadtime: "页面加载于 " + new Date().toLocaleString(),
            
            seen: true,

            todos: [
                { text: "学习JavaScript" },
                { text: "自己学习Vue.JS" },
                { text: "整个牛逼的项目" }
            ],

            userInput: 123456789,

            yourEnter: "",

            foodList: [
                { id:0, text:"蔬菜" },
                { id:1, text:"奶酪" },
                { id:2, text:"随便" }
            ],

            obj,

            rawHtml: "<span style='color:red'>This should be RED.</span>",

            isButtonDisabled: true,

            num: 23,
            ok: false,
            msg: "ABCD",
            id: 998,

            link: "https://cn.vuejs.org/v2/guide",

            firstName: 'Foo',
            lastName: 'Bar',
            now: "",
        }
    },
    methods: {
        showHide: function () {
            this.seen = !this.seen;
        },
        reverseMsg: function () {
            this.userInput = this.userInput.toString().split("").reverse().join("")
        },
        mNow: function () {
            this.now = Date.now()+"_m"
        }
    },
    computed: {
        reverseMessage: function () {
            return this.msg.split("").reverse().join("");
        },
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },

            //setter - 运行app.fullName='John Durnning'时，会反向更新firstName和lastName
            set: function (newVal) {
                var names = newVal.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length-1]
            }
        },
        cNow: function () {
            return this.now.replace("_m", "_c")
        }
    },
});
